<template>
	<view class="content">
		<image src="../../static/index/bg.png" class="bg" mode=""></image>
		<scroll-view scroll-y="true" class="main" @scrolltolower="more">
			<view class="topBox">

				<view class="top">
					<view class="l">{{config.user_name}}</view>
					<view class="r">
						<image src="/static/index/dingwei.png" mode=""></image>
						<text>{{location.city}}</text>
					</view>
				</view>
				<view class="center">
					<view class="item">
						<image src="/static/index/baozhang.png" mode=""></image>
						<text>全场保障</text>
					</view>
					<view class="item">
						<image src="/static/index/miaotui.png" mode=""></image>
						<text>超时秒退</text>
					</view>
					<view class="item">
						<image src="/static/index/baopei.png" mode=""></image>
						<text>爽约包赔</text>
					</view>
				</view>

				<u-skeleton class="u-m-t-30" rows="1" :loading="loadings" :title="false" rowsHeight='160'>
					<view class="bottom">
						<u-swiper :list="swiper" :autoplay="false" height="256rpx" keyName="image"
							@click="swiperGo(swiper,$event)"></u-swiper>
					</view>
				</u-skeleton>
			</view>
			
			<view class="notice_box" v-if="noticetext!=''" @click="$goTo('/pages_index/notice?id=' + noticeid)">
				<view class="notice_box_item">
					<image src="../../static/notice.png" class="notice_box_img" mode=""></image>
					<u-notice-bar duration=10000 bgColor='#fff' color='#000' mode='none' :icon='false' :text="noticetext" ></u-notice-bar>
				</view>
				<u-icon name='arrow-right'></u-icon>
			</view>
			<view class="cateBox" v-if="cate.length>0">
				<!-- <view class="cate" v-for="(item,index) of cate" @click="$goTo('/pages/index/cate?type=1&name='+item.name+'&id='+item.id)">
					<image :src="$oss(item.image)" mode="" class="icon"></image>
					<view class="word">{{item.name}}</view>
				</view> -->
				<u-scroll-list>
					<view class="scroll-list z-padding-lr-32">
						<view class="scroll-list__line" v-for="(item, index) in cate" :key="index">
							<view class="scroll-list__line__item" @click="$goTo('/pages/index/cate?type=1&name='+item1.name+'&id='+item1.id)" v-for="(item1, index1) in item" :key="index1"
								:class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']">
								<image class="scroll-list__line__item__image" :src="$oss(item1.image)" mode=""></image>
								<text class="scroll-list__line__item__text z-margin-t-16">{{ item1.name }}</text>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
			<view class="good_skill" v-if="skilllist.length>0">
				<image src="../../static/good.png" class="good_skill_img" mode=""></image>
				<view class="good_skill_title">优秀技师</view>
			</view>

			<scroll-view scroll-x="true" class="goodskillbox" v-if="skilllist.length>0">
				<view class="goodskillbox">
					<view class="goodskillbox_item" v-for="i in skilllist" @click="$goTo('/pages_technician/jsDetails/jsDetails?id=' + i.id)">
						<image :src="$oss(i.work_image)" class="goodskillbox_item_img" mode="aspectFill"></image>
						<view class="goodskillbox_item_bottom">
							<view class="goodskillbox_item_bottom_one">
								<view class="u-font-bold">{{i.name}}</view>
								<view class=" goodskillbox_item_bottom_one_text" v-if="i.is_rest">
									休息中
								</view>
								<view v-else></view>
							</view>
							<view class="goodskillbox_item_bottom_two">
								<image src="../../static/pages_technician/starb.png"
									class="goodskillbox_item_bottom_two_img" mode=""></image>
								<view class="yellow">{{i.score > 0 ? i.score : '5.0'}}</view>
								<view class="">已接{{i.sale}}单</view>
							</view>
							<view class="newbox_right_top_right flex">
								<view class="timetitle">
									<text class="word">最早可约</text>
								</view>
								<view class="time" v-if="i.timeInfo" >
									<text class="word">{{changetime(i.timeInfo.starttime)}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<view class="recommendBox">
				<view class="title">
					<view class="l">推荐套餐</view>
					<view class="r" @click="show =  true">
						<text>{{paixu}}</text>
						<image src="/static/index/down.png" class="icon" mode=""></image>
					</view>
				</view>
				<u-skeleton rows="6" :loading="loading" class="u-m-t-30" :title="false" rowsHeight='120'>
					<view class="items">
						<view class="item" v-for="item in list" @click="toDetails(item.id)">
							<!-- <image class="fengmian" :src="$oss(item.image)" mode="aspectFill"></image> -->
							<u--image class="fengmian" :fade="true" :src="$oss(item.image)" width="200rpx"
								height="160rpx"></u--image>
							<view class="right">
								<view class="name">{{item.name}}</view>
								<view class="gongneng">
									<view class="info">{{item.intro}}</view>
								</view>
								<view class="price">
									<!-- <view class="money">
									<text>¥</text>
									<text>{{item.price}}</text>
								</view> -->
									<view class="vipPrice">
										<image src="../../static/vipBg.png" class="vip" mode=""></image>
										<view class="word">¥ {{item.price}}</view>
									</view>
									<view class="reservation_btn" @click.stop="toskill(item.id)">立即预约</view>
								</view>
								<view class="naozhong">
									<image src="/static/naozhong.png" class="icon"></image>
									<text>{{item.costmin}}分钟</text>
								</view>
							</view>

						</view>
						<u-empty mode="list" v-if="finish && list.length === 0" style="margin-top: 200rpx;"
							icon="/static/none.png">
						</u-empty>
					</view>
					<view class="flex-cneter ensureBox" v-if="ensure_image">
						<image :src="$oss(ensure_image)" class="ensure_image" mode="widthFix"></image>
					</view>
				</u-skeleton>
			</view>
			<u-picker :show="show" :columns="columns" @cancel="show = false" @confirm="change"></u-picker>
			<u-popup :show="show1" mode="center" bgColor="transparent" :closeable="false" round="10">
				<view class="couponBox">
					<view class="coupon" @click="accept">
						<image src="../../static/index/coupon.png" class="bg" mode=""></image>
						<view class="num">
							<view class="l">{{total}}</view>
							<view class="r">元</view>
						</view>
					</view>
					<image src="../../static/index/close.png" class="close" @click="show1 = false" mode=""></image>
				</view>
			</u-popup>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				title: '',
				swiper: [],
				page: 1,
				finish: false,

				loading: true,
				loadings: true,
				list: [],
				show: false,
				show1: false,

				columns: [
					['综合排序', '价格', '销量', '好评度']
				],
				type: 0,
				location: '',
				paixu: '默认排序',
				total: '',
				ensure_image: '',
				noticetext: '',
				noticeid: '',
				skilllist:[],
				cate:[]
			}
		},
		computed: {
			config() {
				return this.$store.state.config
			}
		},
		onLoad(option) {
			
			this.ensure_image = uni.getStorageSync('project').ensure_image
			if (option.channel) {
				uni.setStorageSync('channel', option.channel);
				this.scan(option.channel)
			}
			if (option.sale) {
				uni.setStorageSync('invitecode', option.sale);
				this.scan(option.sale)
			}
			if (option.invitecode) {
				uni.setStorageSync('invitecode', option.invitecode);
			}
			this.getSwiper()
			this.getCoupon()
			this.getList()

			this.getInfo()
			// #ifdef H5

			this.$jwx.share()
			// #endif
			this.notice()
			// this.searchskill()
			this.allClassify()
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
				this.$toast('刷新成功')
			}, 1500)
		},
		methods: {
			//时间戳转化
			changetime(value){
				var now = new Date(value*1000);
				var year = now.getFullYear();
				var month = now.getMonth() + 1 < 10 ? '0' + (now.getMonth() + 1) : (now.getMonth() + 1);
				var day = now.getDate() < 10 ? '0' + now.getDate() : now.getDate();
				var hour = now.getHours() < 10 ? '0' + now.getHours() : now.getHours();
				var minute = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes();
				var second = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds();
				let data = {
					year,
					month,
					day,
					hour,
					minute,
					second,
					time: hour + ':' + minute 
				}
				return data.time;
			},
			newarr(N,Q){
			  var R = [],F;
			    for (F = 0;F < Q.length;) {
			        R.push(Q.slice(F,F += N))
			    }
			    return R
			},
			allClassify(){
				this.$api.post('/allClassify',{
					pid:0
				}).then(res=>{
					this.newarr(5,res.data)
					this.cate = this.newarr(5,res.data)
				})
			},
			notice() {
				this.$api.post('/notice', {
					types: 'info',
					type: 1
				}).then(res => {
					console.log(res);
					this.noticetext = res.data.name
					this.noticeid = res.data.id
				})
			},
			searchskill(){
				this.$api.post('/searchskill',{
					isrec:1,
					...this.location,
					// city: '郑州市',
					// lat: '34.79977',
					// lng: '113.66072',
					is_free:'',
					gender:''
				}).then(res=>{
					this.skilllist = res.data
				})
			},
			accept() {
				if (uni.getStorageSync('token')) {
					this.$api.post('/acceptnew').then(res => {
						this.show1 = false
						this.$authTo('/pages_my/coupons/coupons')
					}).catch((res) => {})
				} else {
					this.$login()
				}
			},
			getCoupon() {
				this.$api.post('/newcoupon').then(res => {
					if (res.code == 1) {
						this.coupon = res.data
						let total = 0
						for (let i = 0; i < res.data.length; i++) {
							total += res.data[i].reduce
						}
						this.total = total
						this.show1 = (this.total > 0)
					}
				}).catch((res) => {


				})
			},
			...mapActions(['getLocation']),
			async getInfo() {
				if (!this.$store.state.location) {
					await this.getLocation()
				}
				console.log(this.$store.state.location)
				this.location = JSON.parse(JSON.stringify(this.$store.state.location))
				this.searchskill()
			},
			scan(code) {
				this.$api.post('/scan', {
					code: code
				}).then(res => {

				})
			},
			change(e) {
				this.show = false
				this.type = e.indexs[0]
				this.paixu = e.value[0]
				this.reload()
			},
			reload() {
				this.page = 1
				this.finish = false
				this.getList()
			},
			more() {
				this.page++
				this.getList()
			},
			getList() {
				if (this.finish) {
					return
				}
				let data;
				if (this.type === 0) {
					data = {
						page: this.page
					}
				} else if (this.type === 1) {
					data = {
						page: this.page,
						price_sort: 1
					}
				} else if (this.type === 2) {
					data = {
						page: this.page,
						sale_sort: 1
					}
				} else if (this.type === 3) {
					data = {
						page: this.page,
						comment_sort: 1
					}
				}
				this.$api.post('/serviceinfo', data).then(res => {
					if (this.page === 1) {
						this.list = []
					}
					if (res.code == 1) {
						this.loading = false
					}
					this.list = this.list.concat(res.data)
					if (res.data.length === 0) {
						this.finish = true
					}
				})
			},
			swiperGo(item, e) {
				if (item[e].type == 1) {
					this.$goTo('pages_my/article/article?id=' + item[e].article_id)
				} else if (item[e].type == 2) {
					// #ifdef APP-PLUS
					plus.runtime.openURL(item[e].url)
					// #endif
					window.location.href = item[e].url
				} else if (item[e].type == 3) {
					this.$goTo(item[e].jumpInfo.url)
				} else {
					return
				}
			},
			getSwiper() {
				this.$api.post('/swiper').then(res => {
					if (res.code == 1) {
						this.loadings = false
					}
					res.data = res.data.map(value => {
						value.image = this.$oss(value.image)
						return value
					})
					this.swiper = res.data
				})
			},
			goToReservation() {
				uni.navigateTo({
					url: '/pages/reservation/reservation'
				})

			},
			toskill(id) {
				uni.navigateTo({
					url: '/pages/selectTechnician/selectTechnician?id=' + id
				})
			},
			toDetails(id) {
				uni.navigateTo({
					url: '/pages_index/details/details?id=' + id
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #f7f7fa;
	}

	.couponBox {
		text-align: center;
	}

	.coupon {
		position: relative;
		width: 574rpx;
		height: 688rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 50rpx;



		.num {
			display: flex;
			align-items: flex-end;
			justify-content: center;
			position: relative;
			z-index: 100;
			margin-bottom: 100rpx;

			.l {
				font-size: 150rpx;
				font-weight: bold;
				color: #FFB21C;
			}

			.r {
				font-size: 50rpx;
				font-weight: bold;
				color: #FFB21C;
				margin-bottom: 40rpx;
			}
		}
	}

	.close {
		width: 60rpx;
		height: 60rpx;
	}

	.content {
		height: calc(100vh - var(--window-bottom) - var(--window-top));
		padding-top: var(--status-bar-height);
		box-sizing: border-box;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}

		.main {
			overflow: hidden;
			height: 100%;
		}

		.topBox {
			padding: 20rpx 32rpx 32rpx;
			box-sizing: border-box;

			.bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 750rpx;
				height: 486rpx;
			}

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				z-index: 10;

				.l {
					font-size: 40rpx;
					color: #1c274c;
					font-weight: bold;
				}

				.r {
					padding: 0 10rpx;
					height: 66rpx;
					background: rgba(255, 255, 255, 0.9);
					border-radius: 20rpx;
					border: 1rpx solid #ffffff;
					backdrop-filter: blur(10px);
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					font-weight: 600;
					color: #1c274c;
					/* #ifdef MP */
					margin-right: 200rpx;

					/* #endif */
					image {
						width: 25rpx;
						height: 25rpx;
						margin-right: 20rpx;
					}

					text {
						padding-left: 20rpx;
						border-left: 1rpx solid #1c274c;
					}
				}
			}

			.center {
				position: relative;
				z-index: 10;
				width: 686rpx;
				height: 80rpx;
				background: rgba(0, 206, 155, 0.15);
				border-radius: 20rpx;
				border: 2rpx solid #ffffff;
				margin: 30rpx auto 0;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.item {
					font-size: 24rpx;
					color: #3b506b;
					display: flex;
					align-items: center;

					image {
						width: 38rpx;
						height: 38rpx;
						margin-right: 12rpx;
					}
				}
			}

			.bottom {
				width: 686rpx;
				border-radius: 30rpx;
				overflow: hidden;
				border: 2rpx solid #ffffff;
				margin-top: 30rpx;

				image {
					width: 686rpx;
					height: 256rpx;
				}
			}
		}
	}

	.recommendBox {
		padding: 0 32rpx;
		box-sizing: border-box;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.l {
				color: #1c274c;
				font-weight: bold;
				font-size: 30rpx;
				background: url(/static/index/titleBg.png) no-repeat;
				background-size: 60rpx 18rpx;
				background-position: left bottom;
			}

			.r {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #00CE9B;

				.icon {
					width: 14rpx;
					height: 9rpx;
					margin-left: 15rpx;
				}
			}
		}

		.ensureBox {
			margin: 30rpx;
		}

		.items {
			padding-bottom: 30rpx;

			.item {
				width: 686rpx;
				padding: 30rpx 32rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 20rpx;
				display: flex;
				margin: 30rpx auto 0;
				position: relative;

				.fengmian {
					width: 200rpx;
					height: 160rpx;
					border-radius: 20rpx;
					margin-right: 20rpx;
				}

				.right {
					.name {
						font-size: 30rpx;
						font-weight: 600;
						color: #1C274C;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 70%;
					}

					.gongneng {
						display: flex;
						align-items: center;
						margin: 15rpx 0 20rpx;

						.info {
							height: 40rpx;
							border-radius: 10rpx;
							opacity: 0.4;
							border: 1rpx solid #8D93A5;
							font-size: 20rpx;
							color: #1C274C;
							line-height: 40rpx;
							text-align: center;
							margin-right: 10rpx;
							padding: 0 10rpx;
							display: -webkit-box;
							/* 将容器作为弹性盒子 */
							-webkit-box-orient: vertical;
							/* 垂直排列盒子内容 */
							-webkit-line-clamp: 1;
							/* 设置最大行数为1行 */
							overflow: hidden;
							/* 隐藏溢出的内容 */
							text-overflow: ellipsis;
							/* 使用省略号代替溢出的内容 */
						}
					}

					.price {
						display: flex;
						align-items: center;
						width: 400rpx;
						position: relative;

						.money {
							margin-right: 15rpx;

							text:first-child {
								font-size: 24rpx;
								color: #E91919;
							}

							text:last-child {
								font-size: 28rpx;
								color: #E91919;
								font-weight: 600;
							}
						}

						.vipPrice {
							width: 127rpx;
							height: 35rpx;
							// background: url(/static/vipBg.png) no-repeat;
							// background-size: contain;
							font-size: 22rpx;
							font-weight: 900;
							color: #292439;
							position: relative;
							margin-right: 50rpx;

							.vip {
								position: absolute;
								left: 0;
								top: 0;
								width: 100%;
								height: 100%;
							}

							.word {
								height: 100%;
								width: 100%;
								display: flex;
								align-items: center;
								justify-content: flex-end;
								padding-right: 10rpx;
								box-sizing: border-box;
								position: relative;
								z-index: 10;
							}
						}

						.reservation_btn {
							width: 150rpx;
							height: 56rpx;
							background: #00CE9B;
							border-radius: 28rpx;
							font-size: 22rpx;
							color: #FFFFFF;
							display: flex;
							align-items: center;
							justify-content: center;
							position: absolute;
							right: 0;
						}
					}

					.naozhong {
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 22rpx;
						color: #00CE9B;
						width: 142rpx;
						height: 52rpx;
						background: rgba(0, 206, 155, .1);
						border-radius: 100rpx 0rpx 0rpx 100rpx;
						position: absolute;
						right: 0;
						top: 30rpx;

						.icon {
							width: 24rpx;
							height: 24rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}
	}

	/deep/ .u-skeleton__wrapper__content__rows animate {
		width: 700rpx !important;
	}
	.cateBox{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin: 30rpx auto;
		background: #fff;
		padding: 30rpx 20rpx;
		border-radius: 15rpx;
		box-sizing: border-box;
		width: 686rpx;
		.scroll-list {
			@include flex(column);
			box-sizing: border-box;
		
			&__line {
				@include flex;
				margin-top: 10px;
		
				&__item {
					margin-right: 30rpx;
					display: flex;
					align-items: center;
					flex-direction: column;
					&__image {
						width: 61px;
						height: 48px;
					}
					&__text {
						color: #000;
						font-size: 12px;
					}
					&--no-margin-right {
						margin-right: 0;
						
					}
				}
			}
		}
		.cate{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			width: 20%;
			margin-bottom: 20rpx;
			.icon{
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 20rpx;
			}
			.word{
				font-size: 24rpx;
				color: #333;
			}
		}
	}
	.notice_box {
		display: flex;
		align-items: center;
		border-radius: 20rpx;
		width: 686rpx;
		background-color: #fff;
		padding: 20rpx 30rpx;
		margin: 20rpx auto;
		box-sizing: border-box;
		justify-content: space-between;
	::v-deep .u-notice__content__text{
			width: 500rpx !important;
		}
		.notice_box_item{
			display: flex;
			align-items: center;
		}
		.notice_box_img {
			width: 38rpx;
			height: 28rpx;
			margin: 10rpx 20rpx 10rpx 10rpx;
		}
	}

	.good_skill {
		padding: 20rpx 42rpx 30rpx;
		display: flex;
		align-items: center;

		.good_skill_img {
			width: 32rpx;
			height: 32rpx;
			margin-right: 20rpx;
		}

		.good_skill_title {
			font-weight: bold;
		}
	}

	.goodskillbox {
		width: 686rpx;
		display: flex;
		margin: 0 auto;
		padding-bottom: 20rpx;
		.goodskillbox_item {
			border-radius: 20rpx;
			padding: 20rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			&:nth-child(n+1){
				margin-right: 20rpx;
			}
			.goodskillbox_item_img {
				width: 247rpx;
				height: 247rpx;
				margin-bottom: 20rpx;

			}

			.goodskillbox_item_bottom {
				display: flex;
				flex-direction: column;

				.goodskillbox_item_bottom_one {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.goodskillbox_item_bottom_one_text {
						padding: 10rpx 20rpx;
						background-color: #F6F7FB;
						border-radius: 10rpx;
						font-size: 24rpx;
					}
				}

				.goodskillbox_item_bottom_two {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #999;
					margin: 20rpx 0;
					.goodskillbox_item_bottom_two_img {
						width: 22rpx;
						height: 22rpx;
					}

					.yellow {
						color: #FABE49;
						margin: 0 20rpx;
					}
				}
				.newbox_right_top_right{
					flex-direction: row;
					font-size: 26rpx;
					color: #00CE9B;
					.timetitle{
						background: #C8F5E9;
						padding:  10rpx;
						border-radius: 10rpx 0 0 10rpx;
						
						.word{
							font-size: 22rpx;
							color: #00CE9B;
						}
					}
					.time{
						background: rgba(0,206,155,0.08);
						padding:  10rpx;
						border-radius:  0 10rpx  10rpx 0;
						.word{
							font-size: 22rpx;
							color: #00CE9B;
						}
					}
				}

			}


		}
	}
</style>